import React from 'react'
import Bread from '../../../components/breadcrumb/Bread'
import Inquire from './Inquire'
import { Switch, Table } from 'antd';
import { useState } from 'react';
import { useEffect } from 'react';
import api from '../../../aips/role'
import { Divider, Tag } from 'antd';
import { SettingOutlined, UserOutlined, DownOutlined } from '@ant-design/icons';
import MenuDrawer from './MenuDrawer';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio } from 'antd';
import { Dropdown, Space } from 'antd';
import { message, Popconfirm } from 'antd';
import '../../../assets/styles/center.css'

//新增删除更多选择
const items = [
  {
    label: '导出Excel',
    key: '3',
  },
];
const handleMenuClick = (e) => {
  
};
const menuProps = {
  items,
  onClick: handleMenuClick,
};
const handleButtonClick = (e) => {
  message.info('Click on left button.');
  console.log('click left button', e);
};
const Menu = () => {
  const [size, setSize] = useState('large');
  const [data, setData] = useState()
  useEffect(() => {
    api.menu().then(res => {
      setData(res.rows.children)
    })
  }, [])
  const columns = [
    {
      title: '名称',
      width: 200,
      dataIndex: 'title',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '图标',
      width: 100,
      dataIndex: 'icon',
      render: (_, record) => <i style={{ display: 'inline-block' }} className={'iconfont iconfont-' + record.icon}></i >,

    },
    {
      title: '类型',
      dataIndex: '',
      render: (_, record) => record.type == '0' ? <Tag color="#87d068">菜单</Tag> : <Tag color="#f50">按钮</Tag>
    },
    {
      title: '地址',
      dataIndex: 'path',

    },
    {
      title: 'vue组件',
      dataIndex: 'component',
    },
    {
      title: '权限',
      dataIndex: 'key',
      key: '4',
      width: 150,
    },
    {
      title: '排序',
      dataIndex: 'id',
      key: '5',
      width: 150,
      // render: () =>,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: '6',
      width: 150,
    },
    {
      title: '修改时间',
      dataIndex: 'modifyTime',
      key: '7',
      width: 150,
    },

    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (_, record) => <SettingOutlined style={{ color: '#1189FE' }} onClick={() => showDrawer(record)} />
    },
  ];
  const [fixedTop, setFixedTop] = useState(false);
  function childFun(data) {
    setName(data)
  }
  const [name, setName] = useState('zx')
  //抽屉子组件
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState();
  const [id, setId] = useState();
  const showDrawer = (e) => {
    if (e.id) {
      setId(e)
      setTitle('修改菜单')
      setOpen(true);
    }
    if (e == '新增菜单') {
      setId('0')
      setTitle('新增菜单')
      setOpen(true);
    }
    if (e == '新增按钮') {
      setId('1')
      setTitle('新增按钮')
      setOpen(true);
    }

  };
  const onClose = () => {
    setOpen(false);
  };


  // 气泡框
  // onClick={() => showDrawer('新增菜单')
  const confirm = (e) => {
    // 按钮
    showDrawer('新增按钮')
    message.success('Click on Yes');
  };
  const cancel = (e) => {
    // 菜单
    showDrawer('新增菜单')
    message.error('Click on No');
  };
 
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  return (
    <div>
      {/* //面包屑 */}
      <Bread></Bread>
      <Inquire data={data} name={name} getchilder={childFun}></Inquire>
      <div style={{ margin: '20px 0' }}>
        <Radio.Group value={size} onChange={(e) => setSize(e.target.value)} className='fcc' style={{ width: '260px' }}>
          <Popconfirm
            title="请选择创建类型"
            onConfirm={confirm}
            onCancel={cancel}
            okText="按钮"
            cancelText="菜单"
          >
            <Radio.Button value="large">新增</Radio.Button>
          </Popconfirm>

          <Radio.Button value="default">删除</Radio.Button>
          <Dropdown menu={menuProps}>
            <Button>
              <Space>
                更多操作
                <DownOutlined />
              </Space>
            </Button>
          </Dropdown>
        </Radio.Group>
      </div>
      <Table
      rowSelection={{
        ...rowSelection,
      }}
        columns={columns}
        dataSource={data}
        scroll={{
          x: 1500,
        }}
        rowKey='path'
      />
      {
        open && <MenuDrawer open={open} onClose={onClose} title={title} id={id}></MenuDrawer>
      }

    </div>
  )
}

export default Menu